<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" />
  <title>Hao - Chatgpt</title>
  <style>
    #chatgpt-response {
      font-family: "宋体";
      font-size: 14px;
      color: #0000FF;
      font-weight: bold;
    }
  </style>
  <!-- favicon icon -->
  <link rel="icon" href="img/favicon.png">
  <!-- All CSS Files Here -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/et-line-fonts.css">
  <link rel="stylesheet" href="css/ionicons.min.css">
  <link rel="stylesheet" href="css/magnific-popup.css">
  <link rel="stylesheet" href="css/meanmenu.css">
  <link rel="stylesheet" href="css/global.css">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="css/responsive.css">
  <script src="js/vendor/modernizr-2.8.3.min.js"></script>
  <script>
    var conversationId = 0;
    var messageId = 0;
    var data = {};

    var ask_lock = false;
    var overdue = false;
    // 对话超时定时器
    var overdue_click = 600;
    var overdue_timer = setInterval(function () {
      overdue_click--;
      // 当打印完成时
      if (overdue_click <= 0) {
        window.overdue = true;
      }
    },
      1000);

    async function callCHATGPT() {
      var responseText_ = document.getElementById("chatgpt-response");
      responseText_.innerHTML = "AI: "

      function printMessage(message) {
        var responseText = document.getElementById("chatgpt-response");
        var index = 0;

        // 创建一个定时器，每隔一段时间打印一个字符
        var interval = setInterval(function () {
          responseText.innerHTML += message[index];
          index++;

          // 当打印完成时，清除定时器
          if (index >= message.length) {
            clearInterval(interval);
          }
        },
          50); // 每隔100毫秒打印一个字符
      }

      var xhr = new XMLHttpRequest();
      // var url = "https://api.openai.com/v1/completions";
      var url = "http://chat.aihao.world:3000";
      xhr.open("POST", url, true);
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var json = JSON.parse(xhr.responseText);
          var response = json['answer'];
          window.clock = false;
          window.overdue_click = 600;
          window.conversationId = json['conversationId'];
          window.messageId = json['messageId'];
          window.data = JSON.stringify({
            "question": document.getElementById("chat-gpt-input").value,
            "conversationId": window.conversationId,
            "messageId": window.messageId,
            "overdue": window.overdue
          });

          // 将CHATGPT的返回值输出到文本框
          var responseText = document.getElementById("chatgpt-response");
          var index = 0;

          // 创建一个定时器，每隔一段时间打印一个字符
          var interval = setInterval(function () {
            responseText.innerHTML += response[index];
            index++;

            // 当打印完成时，清除定时器
            if (index >= response.length) {
              clearInterval(interval);
            }
          },
            50); // 每隔50毫秒打印一个字符
        }
      };

      var log = new XMLHttpRequest();
      var log_url = "http://xxx.xxx.xxx.xxx:8888/chat/";
      log.open("POST", log_url, true);
      log.setRequestHeader("Access-Control-Allow-Method", "POST");
      log.setRequestHeader("Access-Control-Allow-Origin", "http://xxx.xxx.xxx.xxx:8888/chat/");
      log.setRequestHeader("Content-Type", "application/json");
      log.onreadystatechange = function () {
        if (log.readyState === 4 && log.status === 200) {
          console.log(log.responseText);
        }
      };

      window.data = JSON.stringify({
        "question": document.getElementById("chat-gpt-input").value,
        "conversationId": window.conversationId,
        "messageId": window.messageId,
        "overdue": window.overdue
      });

      // Malicious behavior judgment
      if (window.clock) {
        await printMessage('别着急，一个一个问...🤔\n\n');
      } else {
        window.clock = true;
        await printMessage('容我三思...🤔\n\n');
        // console.log(data);
        await xhr.send(window.data);
        await log.send(JSON.stringify(
          { "msg": document.getElementById("chat-gpt-input").value }
        ));
      }
    }
  </script>
</head>

<body>
  <div class="page-loader">
    <div class="loader">Loading...</div>
  </div>
  <header id="sticky-header">
    <div class="header-area">
      <div class="container sm-100">
        <div class="row">
          <div class="col-md-8 col-sm-8 col-xs-8">
            <div class="logo text-upper">
              <h4>
                <a href="index.html" style="font-size: 30px">皓のChatgpt</a>
              </h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div class="basic-portfolio-area ptb-10">
    <div class="call-to-action-area gray-bg ptb-60">
      <div class="container">
        <div class="row">
          <div class="form-group">
            <label></label>
            <textarea class="form-control" id="chat-gpt-input" placeholder="说出你的问题～📝" rows="2" resize="none"
              style="width: 90%; margin: 0 auto; background-color: #f4f4f4; color: #333; border: 1px solid #ccc; border-radius: 12px;"></textarea>
          </div>
        </div>
        <div class="row">
          <div class="call-to-action">
            <button onclick="callCHATGPT()" autocomplete="off" class="btn btn-large" id="call_api" href="#"
              style="background-color: #333; color: #f4f4f4; border-radius: 10px; display: block; margin: 0 auto">
              点我发送~👉</button>
          </div>
        </div>
        <div class="row">
          <div class="form-group">
            <label></label>
            <textarea class="form-control" id="chatgpt-response"
              placeholder="对话要通过站长的服务器跨越太平洋，并且AI反应比较慢，请等它回答完一个问题再提出新的问题，保持耐心～🏃" rows="12" resize="none"
              style="width: 90%; height: auto; margin: 0 auto; background-color: #f4f4f4; color: #333; border: 1px solid #ccc; border-radius: 10px; overflow: scroll;"
              readonly="true"></textarea>
          </div>
        </div>
      </div>
      <footer>
        <div class="basic-footer gray-bg text-center ptb-30">
          <div class="container">
            <div class="copyright mt-20">
              <p>🍏Wechat: EagleXH</a></p>
              <hr>
              <p>🚫仅供娱乐，请勿商用！</p>
            </div>
          </div>
        </div>
      </footer>

      <script src="js/vendor/jquery-1.12.0.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/isotope.pkgd.min.js"></script>
      <script src="js/imagesloaded.pkgd.min.js"></script>
      <script src="js/jquery.magnific-popup.min.js"></script>
      <script src="js/jquery.meanmenu.js"></script>
      <script src="js/plugins.js"></script>
      <script src="js/main.js"></script>
</body>

</html>